<template>
  <div id="main">
    <!-- <div ref="echart1" id="chart1"></div> -->
    <div ref="echart2" id="chart2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["option"],
  data() {
    return {};
  },
  methods: {
    
    //渲染图表
    getdata2() {
      let myChart = echarts.getInstanceByDom(this.$refs.echart2);
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(this.$refs.echart2);
      }
      // 绘制图表
      let option = this.option
      if(option)
      myChart.setOption(option,true);
    },
  },
  mounted() {
    //this.getdata();
    this.getdata2();
  },
  watch: {
    option() { //对传递图表数据进行监听
      this.getdata2();
    },
  },
};
</script>

<style lang="less" scoped>
#chart2 {
  width: 1000px;
  height: 600px;
  margin: 20px;
}
</style>